<template>
  <van-nav-bar title="C-Block商城" fixed placeholder />
  <!-- 顶部滚动标题 -->
  <van-notice-bar class="Top" left-icon="volume-o" :scrollable="true" color="#000">
    <van-swipe
      vertical
      class="notice-swipe"
      :autoplay="3000"
      :touchable="false"
      :show-indicators="false"
    >
      <van-swipe-item>盛宇大天才！！！</van-swipe-item>
    </van-swipe>
  </van-notice-bar>

  <!-- 轮播图 -->
  <van-swipe :autoplay="1000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image.goods_id">
      <img class="myImgs" :src="image.img_big_logo" />
    </van-swipe-item>
  </van-swipe>
  <!-- 列表渲染 -->
  <div class="box">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-row>
        <van-col
          class="Cell"
          span="12"
          v-for="item in listArr"
          :key="listArr.goods_id"
          @click="DetailFn(item)"
        >
          <img :src="item.img_big_logo" />
          <p><van-text-ellipsis :content="item.title" /></p>
          <p>{{ item.current_price }}</p>
        </van-col>
      </van-row>
    </van-list>
  </div>

  <div class="flow">
    <van-button type="success" size="small" @click="$router.push('/login')">登录</van-button>
    <van-button type="success" size="small" @click="$router.push('/register')">注册</van-button>
  </div>
</template>
<script>
import http from "../utils/http.js";
export default {
  data() {
    return {
      listArr: [],
      images: [],
      loading: false,
      finished: false,
      current: 0
    };
  },
  methods: {
    DetailFn(v) {
      console.log(v.goods_id);
      this.$router.push("/detail?id=" + v.goods_id);
    },
    onLoad() {
      // 77
      if (this.current == 77) {
        this.finished = true;
      } else {
        this.current++;
        http
          .request({
            url: "/goods/list",
            method: "GET",
            params: {
              current: this.current,
              pagesize: 12
            }
          })
          .then((v) => {
            console.log(v.data);
            this.listArr.push(...v.data.list);
            this.loading = false;
          });
      }
    }
  },
  async created() {
    let r = await http.request({
      url: "/goods/list",
      methods: "GET"
    });
    console.log(r.data.message);
    // this.listArr = r.data.list;
    this.images = r.data.list.slice(8);
  }
};
</script>
<style lang="css" scoped>
.myImgs {
  /* display: block; */
  width: 375px;
  /* height: 100px; */
  border-radius: 5%;
}
.Cell {
  width: 187.5px;
}
.Cell > img {
  width: 100%;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.flow {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
}
.flow > .van-button {
  margin: 5px;
}
</style>
